<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水印添加器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        <h1>水印添加器</h1>
    </div>
    <div class="content">
        <div class="settings-panel">
            <button id="upload-button" aria-label="上传图片"style="
    margin-bottom: 20px;">上传图片</button>
            <input type="file" id="image-input" accept="image/*" aria-hidden="true" style="display: none;">
            
            <div class="setting">
                <label for="watermark-text">水印内容:</label>
                <input type="text" id="watermark-text">
            </div>
            <div class="setting">
                <label for="watermark-color">水印颜色:</label>
                <input type="color" id="watermark-color">
            </div>
            <div class="setting">
                <label for="watermark-size">水印大小:</label>
                <input type="range" id="watermark-size" min="10" max="100">
            </div>
            <div class="setting">
                <label for="watermark-opacity">水印不透明度:</label>
                <input type="range" id="watermark-opacity" min="0" max="1" step="0.1">
            </div>
            <div class="setting">
                <label for="watermark-position">水印位置:</label>
                <select id="watermark-position">
                    <option value="top-left">左上角</option>
                    <option value="top-right">右上角</option>
                    <option value="bottom-left">左下角</option>
                    <option value="bottom-right">右下角</option>
                    <option value="center">中心</option>
                    <option value="tiled">点阵</option>
                </select>
            </div>
            <div class="setting">
                <label for="watermark-rotate">水印旋转角度:</label>
                <input type="range" id="watermark-rotate" min="0" max="360">
            </div>
            <div class="setting">
                <label for="watermark-spacing-horizontal">水平间距:</label>
                <input type="range" id="watermark-spacing-horizontal" min="0" max="100" value="50">
            </div>
            <div class="setting">
                <label for="watermark-spacing-vertical">垂直间距:</label>
                <input type="range" id="watermark-spacing-vertical" min="0" max="100" value="50">
            </div>
            <button id="download-button">下载图片</button>
        </div>
        <div class="preview-panel">
            <canvas id="image-canvas" aria-label="图片预览"></canvas>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
